<template>
    <el-form label-width="80px" :inline="false">
        <el-form-item label="SPU名称">
            <el-input placeholder="SPU名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
            <el-select placeholder="请选择">
                <el-option v-for="tm in tmList" :key="tm.id" :value="tm.id">
                {{ tm.tmName  }}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="SPU描述">
            <el-input type="textarea" placeholder="SPU名称" rows="4"></el-input>
        </el-form-item>
        <el-form-item label="SPU图片">
            <el-upload 
                v-model:file-list="fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" 
                list-type="picture-card"
                :on-preview="handlePictureCardPreview" 
                :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-select placeholder="还有1条可以选择" clearable filterable @change="">
                <el-option v-for="attr in saleAttrList"  :key="attr.id" :value="(attr.id as number)">
                    {{ attr.name }}
                </el-option>

            </el-select>
            <el-button type="primary" size="default" @click="">添加销售属性</el-button>
            <el-table border stripe>
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="属性名"></el-table-column>
                <el-table-column label="属性值名称"></el-table-column>
                <el-table-column label="操作"></el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="">保存</el-button>
            <el-button type="default" @click="emit('setState', 0)">取消</el-button>
        </el-form-item>
    </el-form>

</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "SpuForm",
});
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from "element-plus"
import { requestAllTmList, type TmListType } from "@/api/trademarkList";
import type { BaseSaleAttrListType, SpuImageListType, SpuInfoType, SpuSaleAttrListType } from "@/api/spu"
import {
    requestBaseSaleAttrList,
    requestSpuImgList,
    requestSpuSaleAttrList,
} from "@/api/spu";
//接收props参数
const props = defineProps<{
    spuInfo: SpuInfoType
}>()
//接收在自定义事件,切换视图 
const emit = defineEmits<{
    (event: "setState", state: number): void
}>()

//照片墙逻辑
const fileList = ref<UploadUserFile[]>([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },

    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },

])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

//根据新增还是修改去请求当前Form需要的数据(其中新增需要发送:1.品牌列表2.所有销售属性列表,修改需要发送:1.品牌列表2.所有销售属性列表3.当前spu图片列表4.当前spu的属性列表)
//初始化数据
//品牌
const tmList = ref<TmListType[]>([])
//销售属性列表
const saleAttrList = ref<BaseSaleAttrListType>([])
//照片列表
const spuImageList = ref<SpuImageListType>([])
//销售属性列表
const spuSaleAttrList = ref<SpuSaleAttrListType>([])

//封装请求函数
const getAllUseData = async () => {
    //有id是修改
    if (props.spuInfo.id) {
        //修改逻辑
        const promise1 = requestAllTmList()
        const promise2 = requestBaseSaleAttrList()
        const promise3 = requestSpuImgList(props.spuInfo.id)
        const promise4 = requestSpuSaleAttrList(props.spuInfo.id)
        //并发请求
        try {
            const result = await Promise.all([
                promise1,
                promise2,
                promise3,
                promise4,
            ])
            //result按顺序收集成功状态的数据
            tmList.value = result[0];
            saleAttrList.value = result[1];
            spuImageList.value = result[2];
            spuSaleAttrList.value = result[3];
        } catch (e) {
            ElMessage.error("初始请求失败");
        }

    } else {
        try {
            //新增逻辑 发送两个请求
            const result1 = await requestAllTmList()
            tmList.value = result1
            const result2 = await requestBaseSaleAttrList()
            saleAttrList.value = result2;
        }
         catch (e) {
            ElMessage.error("品牌请求或者属性列表请求失败");
        }
    }
} 

getAllUseData()
</script>